<template>
  <!--
    	作者：luoyiming
    	时间：2020-06-20
    	描述：diy组件-模拟显示-顶部设置栏
    -->
  <div class="phone-top" v-if="diyData.page" @click.stop="$parent.onEditer(-1)" :style="'background:' + diyData.page.style.titleBackgroundColor">
    <div class="status-bar">
      <span class="icon iconfont icon-wifi"  :style="'color:' + diyData.page.style.titleTextColor">
      </span>
      <span class="time" :style="'color:' + diyData.page.style.titleTextColor">19:00</span>
	  <span class="icon iconfont icon-xinhao"  :style="'color:' + diyData.page.style.titleTextColor">
	  </span>
	  <span class="ml4 icon iconfont icon-iconset0250"  :style="'color:' + diyData.page.style.titleTextColor">
	  </span>
    </div>
    <div class="navigation d-s-c" :style="'color:' + diyData.page.style.titleTextColor">
      <div  v-if="diyData.page.params.title_type=='text'">{{diyData.page.params.title}}</div>
      <img :style="'width:'+getImg(diyData.page.params.toplogo)+';'" v-else :src="diyData.page.params.toplogo" alt="" >
      <div class="phone-top-search-box">搜索商品</div>
      <div style="width: 100px;" class="flex-1"></div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {};
    },
    props: {
      diyData: Object
    },
    methods:{
      getImg(src){
       var img_url =src
       var img = new Image()
       img.src=img_url;
       return Math.ceil(img.width * 60 / img.height)+'px'
      },
    }
  };
</script>

<style>
  .phone-top-search-box {
    flex: 1;
    height: 30px;
    line-height: 30px;
    background-color: #FFFFFF;
    border-radius: 3px;
    margin-left: 10px;
    color: #999999;
  }
  .navigation>img{
    width: 30px;
    height: 30px;
  }
</style>
